<template>
  <div class="home-container">
    <!-- 新增全局顶部轮播 -->
    <div class="global-marquee">
      <div class="marquee-content">
        <span v-for="(item, index) in notices" :key="index" class="notice-item">
          {{ item }}
        </span>
      </div>
    </div>

    <!-- 原有内容容器 -->
    <div class="main-content">
      <left class="left-container" />
      <right class="right-container" />
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import { getEntity, save } from "@/api/bvconfig/bvconfig";
import { BASE_CONFIG_ID } from "@/enum/enums";
export default {
  name: 'Home',
  components: {
    Left: resolve => require(['./left/index.vue'], resolve),
    Right: resolve => require(['./right/index.vue'], resolve),
  },
  data() {
    return {
      bvConfig: {},
      notices: [
        '注意事项一：话术中每一句不要太长，否则出现停顿后果自负！',
        '注意事项二：智能回复频率过快会导致此直播间的回复大部分由Ai语音控制！',
        '注意事项三：开始双模型会加大显存内存占用，请注意！',
        '注意事项四：出现播放问题，请切换到兼容模式！',
      ]
    };
  },
  created() {
    this.getEntity();
  },
  watch: {
    pageConfig: {
      handler(newVal, oldVal) {
        this.updatePageConfig(newVal);
        this.saveConfig(newVal);
      },
      deep: true
    }
  },
  computed: {
    pageConfig() {
      return this.$store.state.page.config;
    }
  },
  methods: {
    ...mapActions({
      updatePageConfig: "updatePageConfig",
    }),
    saveConfig: _.debounce(function () {
      save({
        id: BASE_CONFIG_ID,
        config: JSON.stringify(this.pageConfig)
      });
    }),
    getEntity() {
      getEntity(BASE_CONFIG_ID).then(res => {
        if (res.result) {
          this.bvConfig = res.result;
          const config = JSON.parse(this.bvConfig.config) ?? {};
          this.updatePageConfig(config);
        }
      });
    },
  }
};
</script>

<style lang="scss">
.home-container {
  background-color: #ffffff;
  padding: 0 10px; // 调整顶部padding
  display: flex;
  flex-direction: column; // 改为纵向布局
  height: 100%;

  // 新增全局轮播样式
  .global-marquee {
    height: 26px;
    background: #f0f8ff;
    border-bottom: 1px solid #d9e7fd;
    margin: 0 -15px; // 抵消容器padding
    padding: 0 15px;
    overflow: hidden;
    position: relative;

    .marquee-content {
      position: absolute;
      white-space: nowrap;
      animation: global-scroll 30s linear infinite;

      .notice-item {
        display: inline-block;
        padding: 0 40px;
        font-size: 14px;
        color: #d40000;
        line-height: 26px;
        position: relative;
        font-weight: bold;

        &:last-child::after {
          display: none;
        }
      }
    }
  }

  // 主要内容容器
  .main-content {
    flex: 1;
    display: flex;
    padding-top: 10px;
    padding-bottom: 5px;
    min-height: 0; // 修复flex溢出问题

    .right-container {
      flex: 1;
    }
  }

  @keyframes global-scroll {
    0% {
      transform: translateX(100%);
    }

    100% {
      transform: translateX(-100%);
    }
  }
}
</style>
